<script lang="ts">
export default {
  name: "antDv1",
};
</script>
<script setup lang="ts">
import { Graph } from "@antv/x6";
import { Shape } from "@antv/x6";
import { onMounted, ref } from "vue";
const graph = ref<any>();
const data = {
  // 节点
  nodes: [
    {
      id: "node1", // String，可选，节点的唯一标识
      x: 40, // Number，必选，节点位置的 x 值
      y: 40, // Number，必选，节点位置的 y 值
      width: 80, // Number，可选，节点大小的 width 值
      height: 40, // Number，可选，节点大小的 height 值
      label: "hello", // String，节点标签
      shape: "rect", //默认
    },
    {
      id: "node2", // String，节点的唯一标识
      x: 160, // Number，必选，节点位置的 x 值
      y: 180, // Number，必选，节点位置的 y 值
      width: 80, // Number，可选，节点大小的 width 值
      height: 40, // Number，可选，节点大小的 height 值
      label: "world", // String，节点标签
      shape: "ellipse",
    },
    {
      id: "node3", // String，节点的唯一标识
      x: 260, // Number，必选，节点位置的 x 值
      y: 180, // Number，必选，节点位置的 y 值
      width: 80, // Number，可选，节点大小的 width 值
      height: 40, // Number，可选，节点大小的 height 值
      label: "world", // String，节点标签
      shape: "circle",
    },
  ],
  // 边
  edges: [
    {
      source: "node1", // String，必须，起始节点 id
      target: "node2", // String，必须，目标节点 id
    },
  ],
};
onMounted(() => {
  graph.value = new Graph({
    container: document.getElementById("container"),
    background: {
      color: "#fffbe6", // 设置画布背景颜色
    },
    grid: {
      size: 10, // 网格大小 10px
      visible: true, // 渲染网格背景
    },
    panning: {
      enabled: true,
      modifiers: "shift",
    },
  });
  const rect = new Shape.Rect({
    id: "node1",
    x: 40,
    y: 40,
    width: 100,
    height: 40,
    label: "rect",
    zIndex: 2,
  });

  const circle = new Shape.Circle({
    id: "node2",
    x: 280,
    y: 200,
    width: 60,
    height: 60,
    label: "circle",
    zIndex: 2,
  });

  const edge = new Shape.Edge({
    id: "edge1",
    source: rect,
    target: circle,
    zIndex: 1,
  });

  graph.value.addNode(rect);
  graph.value.addNode(circle);
  graph.value.addEdge(edge);
  edge.attr({
    line: {
      sourceMarker: {
        tagName: "path",
        d: "M 20 -10 0 0 20 10 Z",
      },
      targetMarker: {
        tagName: "path",
        fill: "yellow", // 使用自定义填充色
        stroke: "green", // 使用自定义边框色
        strokeWidth: 2,
        d: "M 20 -10 0 0 20 10 Z",
      },
    },
  });
});

const small = () => {
  graph.value.zoom(-0.2);
};
const large = () => {
  graph.value.zoom(0.2);
};
const location = () => {
  graph.value.translate(10, 10);
};
</script>

<template>
  <div class="wrap">
    <div id="container"></div>
    <div class="footer">
      <el-card>
        <el-button type="primary" @click="small">缩放</el-button>
        <el-button type="primary" @click="large">放大</el-button>
        <el-button type="primary" @click="location">位移</el-button>
      </el-card>
    </div>
  </div>
</template>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  #container {
    width: 400px;
    height: 400px;
  }
  .footer {
    width: 100%;
    height: 15%;
  }
}
</style>
